<template>
	<div class="i18n">
		<h2>i18n国际化</h2>
		<el-select v-model="value" placeholder="请选择" @change="changeLang">
			<el-option
				v-for="item in options"
				:key="item.value"
				:label="item.label"
				:value="item.value"
			>
			</el-option>
		</el-select>
		<h3>{{ $t('lang.101') }}</h3>
	</div>
</template>

<script>
export default {
	name: 'i18n',
	components: {},
	data() {
		return {
			options: [
				{
					value: 'zh',
					label: '中文',
				},
				{
					value: 'en',
					label: '英文',
				},
				{
					value: 'ja',
					label: '日本',
				},
			],
			value: 'zh',
		};
	},
	methods: {
		// 改变语言
		changeLang() {
			this.$i18n.locale = this.value;
		},
	},
};
</script>
